<template>
  <div class="box">
    <el-alert
      title="注意：只允许为第三级分类设置相关参数"
      type="warning"
      :closable="false"
      show-icon
    >
    </el-alert>

    <!-- 选择商品分类 -->
    <div class="fenlei">
      选择商品分类：
      <el-cascader
        :options="options"
        clearable
        :props="{ label: 'cat_name', value: 'cat_id' }"
        @change="handleChange"
      ></el-cascader>
    </div>

    <!-- 动态静态切换 -->
    <div class="dynamic">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="动态参数" name="first"> </el-tab-pane>
        <el-tab-pane label="静态属性" name="second"> </el-tab-pane>
      </el-tabs>
    </div>

    <el-button type="primary" @click="dialog33" :disabled="disabled">
      {{ label }}
    </el-button>

    <!-- 商品下蓝色按钮描述 -->
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label=" ">
              <template v-if="props.row.attr_vals != ''">
                <el-tag
                  :key="index"
                  v-for="(item, index) in props.row.arr"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(item,props.row.arr)"
                >
                  {{ item }}
                </el-tag>
              </template>
              <el-input
                class="input-new-tag"
                v-if="(inputVisible=props.row.isShow)"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm(props.row.arr,props.row.isShow)"
                @blur="handleInputConfirm"
              >
              </el-input>
              <el-button
                v-else
                class="button-new-tag"
                size="small"
                @click="showInput(props.row)"
                >+ New Tag</el-button
              >
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column label="商品 ID" prop="attr_id"> </el-table-column>
      <el-table-column label="参数名称" prop="attr_name"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="props">
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="bianji(val, props.row.attr_id)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            icon="el-icon-delete"
            @click="shanchu(val, props.row.attr_id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹出层 -->
    <el-dialog :title="label" :visible.sync="dialogFormVisible">
      <el-form :model="form" show-close="true">
        <el-form-item :label="label" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog22">取 消</el-button>
        <el-button type="primary" @click="dialog(form.name)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
  <script>
import {
  getParameter,
  getParameterList,
  addParameter,
  deleteParameter,
  putParameter,
} from "@/api/user";
export default {
  name: "ParaMeter",
  data() {
    return {
      flag: true,
      label: "添加动态参数",
      dialogFormVisible: false,
      dynamicTags: [],
      inputVisible: false,
      inputValue: "",
      tableData: [],
      activeName: "first",
      options: [],
      disabled: true,
      str: "many",
      val: "",
      tabName: "",
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      bjid: "",
      bjattrid: "",
    };
  },
  methods: {
    showInput(row) {
      this.tableData = this.tableData.filter((item) => {
        if (item.attr_id == row.attr_id) {
          //  this.dynamicTags = item.arr;
          return  item.isShow = !row.isShow //this.$set(item, "isShow", !row.isShow);
        }
      });
       console.log(this.dynamicTags,row.arr);
      
     
      // this.inputVisible = !row.isShow
      // console.log(this.inputVisible);
      // this.inputVisible = true;
      // this.$nextTick((_) => {
      //   this.$refs.saveTagInput.$refs.input.focus();
      // });
    },

    bianji(id, attrid) {
      this.dialogFormVisible = true;
      this.flag = false;
      this.label = "修改动态参数";
      this.bjid = id;
      this.bjattrid = attrid;
      console.log(id, attrid, this.form.name, this.str);
      // putParameter(id, attrid,this.str).then(res => {
      //   console.log(res);
      // })
    },
    shanchu(id, attrid) {
      this.$confirm("此操作将移除该权限, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteParameter(id, attrid).then((res) => {
            console.log(res);
            this.getData();
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });

      console.log(id, attrid);
    },
    dialog33() {
      this.dialogFormVisible = true;
      this.flag = true;
    },
    dialog22() {
      this.dialogFormVisible = false;
      if (this.str == "many") {
        this.label = "添加动态参数";
      } else {
        this.label = "添加静态属性";
      }
    },
    dialog(value) {
      this.dialogFormVisible = false;
      if (this.flag) {
        if (this.str == "many") {
          console.log("many");
          addParameter(this.val, this.str, this.form.name).then((res) => {
            // console.log(res);
            this.getData();
          });
        } else {
          addParameter(this.val, this.str, this.form.name).then((res) => {
            // console.log(res);
            this.getData();
          });
          console.log("only");
        }
      } else {
        putParameter(this.bjid, this.bjattrid, this.form.name, this.str).then(
          (res) => {
            console.log(res);
            this.getData();
          }
        );
        if (this.str == "many") {
          this.label = "添加动态参数";
        } else {
          this.label = "添加静态属性";
        }
        console.log(this.tabName);
        // console.log(this.bjid,this.bjattrid,this.form.name,this.str);
      }
      console.log(value);
    },
    getData() {
      getParameterList(this.val, this.str).then((res) => {
        console.log(res.data.data);
        this.tableData = res.data.data.filter((item) => {
          item.isShow = false;
          item.arr = item.attr_vals.split(",");
          return item;
        });
        console.log(this.tableData);
      });
    },
    handleChange(value) {
      this.$message({
        message: "获取动态参数成功",
        type: "success",
      });
      this.disabled = false;
      this.val = value[2];
      this.getData();
    },
    handleClick(tab, event) {
      this.tabName = tab.name;
      if (tab.name == "first") {
        this.str = "many";
        this.label = "添加动态参数";
      } else if (tab.name == "second") {
        this.str = "only";
        this.label = "添加静态属性";
      }

      this.getData();
    },

    handleClose(tag,arr) {
      arr.splice(arr.indexOf(tag), 1);
      // console.log(this.dynamicTags);
      console.log(arr);
    },

    handleInputConfirm(arr,isShow) {
      
      let inputValue = this.inputValue;
      if (inputValue) {
        arr.push(inputValue);
      }
      isShow = false;
      console.log(arr,isShow);
      this.inputValue = "";
    },
  },
  created() {
    getParameter().then((res) => {
      this.$store.commit("comAdmin/parameterArr", res.data.data);
      this.options = this.$store.state.comAdmin.arr;
      // console.log(this.$store.state.comAdmin.arr);
    });
  },
};
</script>
  
  <style lang="scss" scoped>
.box {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}

.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>